| vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流 | 您所在的位置：网站首页 › html 页码 跳转 › vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流 |
vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
|
文章目录
一、pdf.js介绍二、实现pdf预览的两种方式1、使用viewer.html2、将PDF文件渲染成Canvas
三、viewer.js的使用形势下的一些方法及技巧1、实现外部操作跳转到具体的某一页法1）、修改viewer.js源码，添加一个可供页面跳转的参数page法2）、修改pdf.js里面的页码
2、获取pdf.js里面的页码3、根据pdf.js内置的postMessage函数、findBar函数实现外部文本的搜索4、在pdfjs-3.7.107-dist版本中，给pdf.js传参的处理5、在pdfjs-3.7.107-dist版本中，修改convertToRegExpString方法，更换匹配方法（可匹配到带有空格的文档）6、清除pdf缓存7、pdf.js实现分片加载8、如果后端返回的是流的形式，就用此方法转一下9、 下载
四、原理五、pdf.js历史版本的下载下载方式
一、pdf.js介绍
官网地址：http://mozilla.github.io/pdf.js/ 中文文档地址：https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/print.html PDF.js是基于HTML5技术构建的，用于展示可移植文档格式的文件(PDF)，它可以在现代浏览器中使用且无需安装任何第三方插件。 pdf.js主要包含两个库文件 pdf.js:负责API解析 pdf.worker.js:负责核心解析 二、实现pdf预览的两种方式 1、使用viewer.htmlviewer.html主要分为三层：outerContainer层、printContainer层(该层目前为空)、xl-chrome-ext-bar层、fileInput域。 从官网下载pdf.js包 下载地址：https://mozilla.github.io/pdf.js/getting_started/#download 引入pdf.js包 可将pdf.js包 放到服务器上 如：http://xxxx:8080/static/pdfjs 也可将pdf.js包直接解压在public文件夹下 pdf.js包的目录结构 │ ├── pdf.js - 显示层 │ ├── pdf.js.map - 显示层source map │ ├── pdf.worker.js - 核心层 │ └── pdf.worker.js.map - 核心层source map ├── web/ │ ├── cmaps/ - character maps (required by core) │ ├── compressed.tracemonkey-pldi-09.pdf - PDF文件，用于测试目的 │ ├── debugger.js - 用于debug │ ├── images/ - 图标 │ ├── locale/ - 本地化文件 │ ├── viewer.css - 样式 │ ├── viewer.html - 用于展示的html文件 │ ├── viewer.js - 展示层 │ └── viewer.js.map - 展示层source map └── LICENSE 使用iframe标签显示pdf1)若pdf.js包及pdf文件都在服务器上部署 pdfServerUrl = 'http://xxxx:8080/static/pdfjs/web/viewer.html' pdfInfoUrl = 'http://xxxx:8080/XXX/getClausePdf?Code=1234' url = `${pdfServerUrl}?file=${encodeURIComponent(pdfInfoUrl)}` // 调取接口返回文件流2)若pdf.js包及pdf文件都在本地 |
【本文地址】
公司简介
联系我们